<template>
  <div class="timeline-view">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="formatTime(activity.event_time)"
        :type="getType(activity.event_type)"
        placement="top"
      >
        <el-card>
          <h4>{{ activity.event_summary }}</h4>
          <p>{{ activity.location }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElTimeline, ElTimelineItem, ElCard } from 'element-plus';

const props = defineProps({
  activities: {
    type: Array,
    default: () => []
  }
});

const formatTime = (time) => {
  return new Date(time).toLocaleString();
};

const getType = (type) => {
  switch (type) {
    case 'bank': return 'primary';
    case 'call': return 'success';
    case 'travel': return 'warning';
    default: return 'info';
  }
};
</script>

<style scoped>
.timeline-view {
  padding: 20px;
  max-height: 100%;
  overflow-y: auto;
}
</style>
